<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>

	<!--
@desc 预警触发 更新
@author WeiXiaoJin
@since 2020-01-26 09:30:11
-->

	<div layout:fragment="content">
		<div class="container-fluid content-main">
			<div class="animated fadeIn">
				<div class="row">
					<div class="col-sm-12">
						<div class="card">
							<div class="card-body">

								<form class="form-horizontal" id="modifyForm">

									<input type="hidden" name="id" th:value="${bean.id}" />
									<input type="hidden" name="applicationName" value="applicationName" />	

									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">触发器名称 </label>
										<div class="col-md-9">
											<input class="form-control" id="triggerName" type="text"
												th:value="${ bean.triggerName}" name="triggerName"
												placeholder="触发器名称">
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">级别 </label>
										<div class="col-md-9">
											<input class="form-control" id="triggerSeverity" type="text"
												th:value="${ bean.triggerSeverity}" name="triggerSeverity"
												placeholder="级别">
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">通知类型 </label>
										<div class="col-md-9">
											<!-- 
											<input class="form-control" id="triggerType" type="text"
												th:value="${ bean.triggerType}" name="triggerType"
												placeholder="触发器类型">
											 -->
											 
											 <label class="checkbox-inline">
												<input type="checkbox" name="triggerType" value="email" id="triggerType-email">邮件
											 </label>
											 <label class="checkbox-inline">
												<input type="checkbox" name="triggerType" value="sms" id="triggerType-sms">短信
											 </label>
											 <label class="checkbox-inline">
												<input type="checkbox" name="triggerType" value="dingtask" id="triggerType-dingtask">钉钉
											 </label>
											 <label class="checkbox-inline">
												<input type="checkbox" name="triggerType" value="wechat" id="triggerType-wechat">微信
											 </label>
											 
										</div>
									</div>
									
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">时间段</label>
										<div class="col-md-4">
											<div class="input-group date">
												<span class="input-group-addon"><i
													class="fa fa-calendar"></i></span> <input type="text"
													class="form-control time-input" id="laydate-demo-4"
													name="startTime" data-type="datetime"
													th:value="${ #dates.format(bean.startTime, 'yyyy-MM-dd HH:mm:ss')}"
													data-format="yyyy-MM-dd HH:mm:ss"
													placeholder="yyyy-MM-dd HH:mm:ss" lay-key="4">
											</div>
										</div>
										<div class="col-md-4">
											<div class="input-group date">
												<span class="input-group-addon"><i
													class="fa fa-calendar"></i></span> <input type="text"
													class="form-control time-input" id="laydate-demo-3"
													name="endTime" data-type="datetime"
													th:value="${ #dates.format(bean.endTime, 'yyyy-MM-dd HH:mm:ss')}"
													data-format="yyyy-MM-dd HH:mm:ss"
													placeholder="yyyy-MM-dd HH:mm:ss" lay-key="3">
											</div>
										</div>
									</div>
									
									
									<!-- 
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">开始时间 </label>
										<div class="col-md-9">
											<div class="input-group date">
												<span class="input-group-addon"><i
													class="fa fa-calendar"></i></span> <input type="text"
													class="form-control time-input" id="laydate-demo-3"
													name="startTime"
													th:value="${ #dates.format(bean.startTime, 'yyyy-MM-dd HH:mm:ss')}"
													data-type="datetime" data-format="yyyy-MM-dd HH:mm:ss"
													placeholder="yyyy-MM-dd HH:mm:ss" lay-key="3">
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">结束时间 </label>
										<div class="col-md-9">
											<div class="input-group date">
												<span class="input-group-addon"><i
													class="fa fa-calendar"></i></span> <input type="text"
													class="form-control time-input" id="laydate-demo-3"
													name="endTime"
													th:value="${ #dates.format(bean.endTime, 'yyyy-MM-dd HH:mm:ss')}"
													data-type="datetime" data-format="yyyy-MM-dd HH:mm:ss"
													placeholder="yyyy-MM-dd HH:mm:ss" lay-key="3">
											</div>
										</div>
									</div>
									 -->
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">预警次数 </label>
										<div class="col-md-9">
											<input class="form-control" id="continueTime" type="text"
												th:value="${ bean.continueTime}" name="continueTime"
												placeholder="预警次数">
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">类名 </label>
										<div class="col-md-9">
											<input class="form-control" id="className" type="text"
												th:value="${ bean.className}" name="className"
												placeholder="类名">
										</div>
									</div>
									
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">触发事件</label>
										<div class="col-md-9">
											<input class="form-control" id="webhook" type="text"
												th:value="${ bean.webhook}" 
												name="webhook" placeholder="触发事件">
										</div>
									</div>
									
									<div class="form-group row condation-list condition-row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">触发条件</label>
										<div class="col-md-4">
											<!-- 
											<input class="form-control" id="triggerKeywork" type="text" name="triggerKeywork" placeholder="触发关键字">
											 -->
											<select class="form-control" name="triggerKeywork">
												<option th:each="item,userStat:${rules}" 
														th:value="${userStat.current.key}" 
														th:text="${userStat.current.value}"></option>
											</select>
										</div>
										<div class="col-md-3">
											<input class="form-control" id="triggerValue" type="text" name="triggerValue" placeholder="触发阀值">
										</div>
										<div class="col-md-1">
											<a class="btn" href="javascript:void(0)" onclick="addCondition()"><i class="fa fa-plus"></i> 添加</a> 
										</div>
									</div>
									
									
									<!-- 
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">触发条件 </label>
										<div class="col-md-9">
											<input class="form-control" id="triggerKeywork" type="text"
												th:value="${ bean.triggerKeywork}" name="triggerKeywork"
												placeholder="触发条件">
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-2 col-form-label control-label"
											for="text-input">触发阀值 </label>
										<div class="col-md-9">
											<input class="form-control" id="triggerValue" type="text"
												th:value="${ bean.triggerValue}" name="triggerValue"
												placeholder="触发阀值">
										</div>
									</div>
									 -->
									 
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div style="display:none" class="condation-html">
			<div class="form-group row condation-list">
				<label class="col-md-2 col-form-label control-label"
					for="text-input">触发条件</label>
				<div class="col-md-4">
					 <select class="form-control" name="triggerKeywork">
						<option th:each="item,userStat:${rules}" th:value="${userStat.current.key}" th:text="${userStat.current.value}"></option>
					</select>
				</div>
				<div class="col-md-3">
					<input class="form-control" id="triggerValue" type="text" name="triggerValue" placeholder="触发阀值">
				</div>
				<div class="col-md-1">
					<a class="btn" style="color:red" href="javascript:void(0)" onclick="removeCondition(this)"><i class="far fa-trash-alt"></i> 删除</a> 
				</div>
			</div>
		</div>	
		
	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>

	<script type="text/javascript">
		var modifyForm = $("#modifyForm");
		var maxRule = [[${maxRule}]] ;

		$(function() {
			addForm.validate({
				ignore : [],
				rules : {
					triggerName : {
						required : true
					},
					triggerSeverity : {
						required : true
					},
					triggerType : {
						required : true
					},
					startTime : {
						required : true
					},
					endTime : {
						required : true
					},
					continueTime : {
						required : true
					},
					className : {
						required : true
					},
					triggerKeywork : {
						required : true
					},
					triggerValue : {
						required : true
					}
				}
			});
		});

		function submitHandler() {
			var result = $.validate.form("modifyForm");
			if (result) {
				var modifyUrl = ctx + "base/logger/logTrigger/update";
				$.operate.save(modifyUrl, modifyForm.serialize());
			}
		}
		
		// 添加类规则
		function addCondition(){
			var size = $(".condation-list").length ; 
			if(size == (maxRule+1)){
				$.modal.msg("触发条件最多不能超过"+maxRule+"个") ;
				return ;	
			}
			var html = $(".condation-html").html() ; 
			$(".condition-row").after(html) ; 
		}
		
		function removeCondition(self){
			$(self).parent().parent().remove() ;
		}
		
	</script>
</body>
</html>
